

  <template>
  <div class="bf-commont-template">
    <!-- <div style="padding: 0 16px ;">
      <h3>预约来访列表</h3>
      <p>该页面代码已经自动生成，按照普通码 表增删改查 为基础生成模板</p>
      <p>生成代码对应的 vue 文件路径：D:\Zmyitem\vue-element-admin\src\beneform4j\view\xz\visit\preinsert\index.vue</p>
      <el-alert title="注意：表格内数据为模拟数据, 如果数据格式不对，请先进行格式转换。 模拟数据文件路径：src/mock/demo.js" type="warning"> </el-alert>
    </div> -->

    <div class="clearfix bf-top-button">
      <div class="float-l">
        <el-button @click="showAdd" type="primary">未预约登记</el-button>
        <el-button @click="showRegAdd" type="primary">已预约登记</el-button>
      </div>
      <div class="float-r">
        <div class="float-l">
          <el-input
            placeholder="请输入接待员工姓名搜索"
            prefix-icon="el-icon-search"
            v-model="searchData"
            @keyup.enter.native="quickSearch"
          ></el-input>
        </div>
        <div class="float-l padding-l">
          <el-button @click="showSearch" type="primary">高级筛选</el-button>
        </div>
      </div>
    </div>

    <bf-table
      :data="listData"
      :setting="setting"
      :rowAction="rowAction"
      @pageChange = "pageChange"
      :editRules = "editRules"
      ref="table"
    ></bf-table>

    <bf-table-detail :rowNum="2" :width="800" :title="'详情展示'" :editForm='setting' ref='detailRef' >
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>来访人员</div>
          <div ></div>
        </div>
        <bf-table
        :data="otherData"
        :setting="otherSetting"
        :hiddenPagination = "true"
        ref="table"
        ></bf-table>
      </template>
    </bf-table-detail>
    <bf-table-edit :width="600" :title="'编辑'" :editForm='setting' ref='editRef' @formSubmit='editSubmit' :editRules="editRules">
      <template slot="table">
        <div class="bf-table-title clearfix">
          <div>来访人员</div>
          <div @click="addOtherItem">新增</div>
        </div>
        <bf-table
        :data="otherData"
        :setting="otherSetting"
        :rowAction="otherRowAction"
        :hiddenPagination = "true"
        ref="table"
        ></bf-table>
      </template>
    </bf-table-edit>
    <!-- 新增 -->
    <bf-table-edit :width="600" :title="'新增来访登记'" :editForm='setting' ref='addRef' @formSubmit='addSubmit' :editRules="editRules">
        <template slot="table">
          <div class="bf-table-title clearfix">
            <div>来访人员</div>
            <div @click="addOtherItem">新增</div>
          </div>
          <bf-table
          :data="otherData"
          :setting="otherSetting"
          :rowAction="otherRowAction"
          :hiddenPagination = "true"
          ref="table"
          ></bf-table>
        </template>
    </bf-table-edit>
    <!-- 高级搜索 -->
    <bf-table-search :title="'搜索'" ref="searchRef" :editForm="searchSetting" @formSubmit='searchSubmit'></bf-table-search>

    <!-- 已预约登记 -->
    <bf-table-edit :rowNum="2" :width="800" :title="'已预约来访登记'" :editForm='regSetting' ref='regAddRef' @formSubmit='addRegSubmit' :editRules="editRules">
        <template slot="cellPhone">
          <div>
            <span class="reg-number">预约手机号</span>
            <el-select
              v-model="value9"
              filterable
              remote
              reserve-keyword
              placeholder="请输入手机号搜索"
              :remote-method="remoteMethod"
              @change="changeRegItem"
              :loading="loading">
              <el-option
                v-for="item in options4"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>

        </template>
        <template slot="table">
          <div class="bf-table-title clearfix">
            <div>来访人员</div>
            <div ></div>
          </div>
          <bf-table
          :data="regOtherData"
          :setting="otherSetting"
          :hiddenPagination = "true"
          ref="table"
          ></bf-table>
        </template>
    </bf-table-edit>

    <!-- 新增预已经预约登记 -->
    <bf-table-edit :rowNum="2" :width="800" :title="'新增来访登记'" :editForm='regAddSetting' ref='regOtherAddRef' @formSubmit='regOtherAddVisitSubmit' :editRules="editRules">
        <template slot="table">
          <div class="bf-table-title clearfix">
            <div>来访人员</div>
            <div @click="regAddOtherItem">新增</div>
          </div>
          <bf-table
          :data="regOtherData"
          :setting="otherSetting"
          :rowAction="regOtherRowAction"
          :hiddenPagination = "true"
          ref="table"
          ></bf-table>
        </template>
    </bf-table-edit>

    <!-- 新增来访人员 -->
    <bf-table-edit :right="600" :title="'新增来访人员'" :editForm='otherSetting' ref='visitPeopleRef' @formSubmit='visitPeopleSubmit' :editRules="otherEditRules"></bf-table-edit>
    <!-- 编辑来访人员 -->
    <bf-table-edit :right="600" :title="'编辑来访人员'" :editForm='otherSetting' ref='editVisitPeopleRef' @formSubmit='editVisitPeopleSubmit' :editRules="otherEditRules"></bf-table-edit>

    <!-- 新增来访人员 -->
    <bf-table-edit :right="600" :title="'新增来访人员'" :editForm='otherSetting' ref='regVisitPeopleRef' @formSubmit='regVisitPeopleSubmit' :editRules="otherEditRules"></bf-table-edit>
    <!-- 编辑来访人员 -->
    <bf-table-edit :right="600" :title="'编辑来访人员'" :editForm='otherSetting' ref='regEditVisitPeopleRef' @formSubmit='regVditVisitPeopleSubmit' :editRules="otherEditRules"></bf-table-edit>
  </div>
</template>

<script>
import request from '@/utils/request'
import { setting, visitPeopleSetting, addRules, searchSetting, regSetting, regAddSetting } from './setting'
import { getListApi, getItemDetailApi, editItemApi, deleteItemApi, addItemApi, getRegListApi, getRegItemDetailApi } from './api'
export default {
  data() {
    return {
      regAddSetting: regAddSetting,
      options4: [],
        value9: [],
      searchOptions: [],
      searchData: '',
      loading: false,
      otherData: [],
      regOtherData: [],
      regDetail: {},
      searchData: '',
      otherSetting: visitPeopleSetting,
      searchSetting: searchSetting,
      otherEditRules: addRules,
      regSetting: regSetting,
      listData: {
      },
      regOtherRowAction: [
        {
          label: '编辑',
          click: (item) => {
            this.$refs.regEditVisitPeopleRef.show(item.scope.row)
          }
        },
        {
          label: '删除',
          click: (item) => {
            this.$confirm('删除该条记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let id = item.scope.row.dateId
              if (!id) {
                id = item.scope.row.id
                this.regOtherData.forEach((v,i) => {
                  if (v.id == id) {
                    this.regOtherData.splice(i,1)
                  }
                })
              } else {
                this.regOtherData.forEach((v,i) => {
                  if (v.dateId == id) {
                    this.regOtherData.splice(i,1)
                  }
                })
              }
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            })
          }
        }
      ],
      otherRowAction: [
        {
          label: '编辑',
          click: (item) => {
            this.$refs.editVisitPeopleRef.show(item.scope.row)
          }
        },
        {
          label: '删除',
          click: (item) => {
            this.$confirm('删除该条记录, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let id = item.scope.row.dateId

              if (!id) {
                id = item.scope.row.id
                this.otherData.forEach((v,i) => {
                  if (v.id == id) {
                    this.otherData.splice(i,1)
                  }
                })
              } else {
                this.otherData.forEach((v,i) => {
                  if (v.dateId == id) {
                    this.otherData.splice(i,1)
                  }
                })
              }
              this.$message({
                type: 'success',
                message: '删除成功'
              })
            })
          }
        }
      ],
      rowAction: [
        {
          label: '详情',
          click: (item) => {
            let row = item.scope.row
            getItemDetailApi(row.visitId).then(response => {
              if (response.success) {
                let data = response.data
                // data.visitTime = [data.visitTime1, data.visitTime2]
                this.otherData = data.visitDetailBeanList
                this.$refs.detailRef.show(data)
              }
            })
          }
        }
        // {
        //   label: '编辑',
        //   click: (item) => {
        //     let row = item.scope.row
        //     getItemDetailApi(row.visitId).then(response => {
        //       if (response.success) {
        //         let data = response.data
        //         // data.visitTime = [data.visitTime1, data.visitTime2]
        //         this.otherData = data.visitDetailBeanList
        //         this.$refs.editRef.show(data)
        //       }
        //     })

        //   }
        // },
        // {
        //   label: '删除',
        //   click: (item) => {
        //     this.$confirm('删除该条记录, 是否继续?', '提示', {
        //       confirmButtonText: '确定',
        //       cancelButtonText: '取消',
        //       type: 'warning'
        //     }).then(() => {
        //       let id = item.scope.row.id
        //       deleteItemApi(id).then(response => {
        //         if (response.success) {
        //           this.$message({
        //             type: 'success',
        //             message: '删除成功'
        //           })
        //           this.searchList()
        //         }
        //       })
        //     }).catch(() => {
        //       this.$message({
        //         type: 'info',
        //         message: '已取消操作'
        //       })
        //     })
        //   }
        // }
      ],
      setting: setting,
      editRules: {
        id: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitType: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitDate: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitTime: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitTime2: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitSite: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitedEmployee: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitedEmployeeOrg: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitedFlag: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitDateTem: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        visitTimeTem: [
          { required: true, message: '必填项', trigger: 'blur' }
        ]

      },
      searchParams: { // 获取 list 搜索条件，分页
        page: 1
      }
    }
  },
  mounted: function() {
    this.searchList()
  },
  methods: {
    searchList() {
      let params = this.searchParams
      getListApi(params).then(response => {
        if (response.success) {
          this.listData =response
        }
      })
    },
    regOtherAddVisitSubmit(form) {
      form.visitTime = form.visitTimeTem
      form.visitDate = form.visitDateTem
      form.regFlag = '1'
      form.visitDetailBeanList = this.regOtherData
      this.addItem(form)
    },
    changeRegItem(id) {
      this.regDetail = {}
      getRegItemDetailApi(id).then(response => {
        if (response.success) {
          this.regDetail = response.data
          this.regOtherData = response.data.regDetailBeanList
          // console.log(response.data)
          response.data.visitTime = [response.data.visitTime1, response.data.visitTime2]
          let obj = {
            visitedEmployee: response.data.visitedEmployee,
            employeeName: response.data.employeeName,
            visitedEmployeeOrg: response.data.visitedEmployeeOrg,
            visitDate: response.data.visitDate,
            visitTime: response.data.visitTime,
            searchDate: this.$refs.regAddRef.form.searchDate,
            searchTime: this.$refs.regAddRef.form.searchTime
          }
          this.$refs.regAddRef.show(obj)
        }
      })
    },
    remoteMethod(query) {
      // this.loading = true;
      // this.options4 = [];
      let form = this.$refs.regAddRef.form
      let date = form.searchDate
      let time = form.searchTime
      if (!time) {
        time= []
      }
      if (query !== '') {
        this.loading = true
        // console.log(this.$refs.regAddRef)
        let params = {
          visitorTel: query,
          visitDate: date,
          visitTime1: time[0],
          visitTime2: time[1],
          visitedFlag: '2'
        }
        this.options4 = []
        getRegListApi(params).then(response => {
          if (response.success) {
            // console.log(response)
            this.loading = false
            if (response.list && response.list.length > 0) {
              let opt = []
              response.list.forEach(v =>{
                let item = {
                  label: v.visitorName + v.visitorTel,
                  value: v.regId
                }

                opt.push(item)
              })
              this.options4 = opt
            }
          }
        })
      }
    },
    addRegSubmit(form) {
      // console.log(this.regDetail)
      this.$refs.regAddRef.hidden()
      this.$refs.regOtherAddRef.show(this.regDetail)
    },
    showRegAdd() {
      this.regOtherData = []
      this.searchNum = []
      this.searchTime = []
      this.value9 = ''
      let params = {}
      // 初始化搜索条件： 日期和时间区间
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      if (month < 10) {
        month = '0' + month
      }
      let day = date.getDate()
      if (day < 10) {
        day = '0' + month
      }
      let YYYYMMDD = '' + year + '-' + month + '-' + day
      params.searchDate = YYYYMMDD
      this.$refs.regAddRef.show(params)
    },
    addOtherItem() {
      this.$refs.visitPeopleRef.show({})
    },
    regAddOtherItem() {
      this.$refs.regVisitPeopleRef.show({})
    },
    visitPeopleSubmit(form) {
      let dateId = new Date().getTime()
      form.dateId = dateId
      this.otherData.push(form)
      this.$refs.visitPeopleRef.hidden()
    },
    editVisitPeopleSubmit(form) {
      if (form.id) {
        this.otherData.forEach((v,i) => {
          if (v.id == form.id) {
            this.otherData.splice(i,1,form)
          }
        })
      } else {
        this.otherData.forEach((v,i) => {
          if (v.dateId == form.dateId) {
            this.otherData.splice(i,1,form)
          }
        })
      }
      this.$refs.editVisitPeopleRef.hidden()
    },
    regVisitPeopleSubmit(form) {
      let dateId = new Date().getTime()
      form.dateId = dateId
      this.regOtherData.push(form)
      this.$refs.regVisitPeopleRef.hidden()
    },
    regVditVisitPeopleSubmit(form) {
      if (form.id) {
        this.regOtherData.forEach((v,i) => {
          if (v.id == form.id) {
            this.regOtherData.splice(i,1,form)
          }
        })
      } else {
        this.regOtherData.forEach((v,i) => {
          if (v.dateId == form.dateId) {
            this.regOtherData.splice(i,1,form)
          }
        })
      }
      this.$refs.regEditVisitPeopleRef.hidden()
    },
    showSearch() { // 展示高级搜索form
      this.$refs.searchRef.show()
    },
    searchSubmit(form) {  // 高级搜索提交
      this.searchParams.page = 1
      this.searchParams.visitedEmployee = form.visitedEmployee
      this.searchParams.visitDate = form.visitDate
      this.searchParams.visitorName = form.visitorName
      this.searchParams.visitorTel = form.visitorTel
      this.searchList()
      this.$refs.searchRef.hiden()
    },
    showAdd() { // 展示新增form
      this.otherData = []

      this.$refs.addRef.show({visitedEmployeeOrg: ''})
    },
    addSubmit(form) { // 新增提交
      if (this.otherData.length == 0) {
        this.$message({
          message: '请添加来访人员名单',
          type: 'error'
        })
        return
      }
      // form.visitTime1 = form.visitTime[0]
      // form.visitTime2 = form.visitTime[1]
      // delete form.visitTime
      form.regFlag = '2'
      form.visitDetailBeanList = this.otherData
      this.addItem(form)
    },
    addItem(params) {
      addItemApi(params).then(response => {
        if (response.success) {
          this.$message({
            message: '新增成功',
            type: 'success'
          })

          this.$refs.addRef.hidden()
          this.$refs.regOtherAddRef.hidden()
          this.searchList()
        }
      })
    },
    editSubmit(form) { // 编辑提交
      // form.visitTime1 = form.visitTime[0]
      // form.visitTime2 = form.visitTime[1]
      // delete form.visitTime
      form.visitDetailBeanList = this.otherData
      editItemApi(form).then(response => {
        if (response.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })

          this.$refs.editRef.hidden()
          this.searchList()
        }
      })
    },
    quickSearch() { // 快捷搜索
      this.searchParams.page = 1
      this.searchParams.employeeName = this.searchData
      this.searchList()
    },
    pageChange(pageObj) { // 分页处理
      this.searchParams.page = pageObj.page
      this.searchParams.pageSize = pageObj.pageSize
      this.searchList()
    },
  }
}
</script>

<style scoped>
.reg-number{
  display: inline-block;
  width: 130px;
  text-align: right;
  padding-right: 12px;
}
</style>
